<template>
  <div>
    <a-modal
      title="添加任务"
      v-model:visible="visible"
      width="720px"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
    >
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="名称" v-bind="validateInfos.name">
          <a-input v-model:value="modelRef.name" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="品牌" v-bind="validateInfos.region">
          <a-select v-model:value="modelRef.region" placeholder="请选择">
            <a-select-option value="">请选择</a-select-option>
            <a-select-option value="shanghai">潘婷</a-select-option>
            <a-select-option value="beijing">沙宣</a-select-option>
            <a-select-option value="beijing">海飞丝</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="平台" v-bind="validateInfos.platform">
          <a-select v-model:value="modelRef.platform" placeholder="请选择">
            <a-select-option value="">请选择</a-select-option>
            <a-select-option value="1">数据银行</a-select-option>
            <a-select-option value="2">策略中心</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="类型" v-bind="validateInfos.type">
          <a-select v-model:value="modelRef.type" placeholder="请选择">
            <a-select-option value="">请选择</a-select-option>
            <a-select-option value="1" name="type">指标</a-select-option>
            <a-select-option value="2" name="type">文件上传</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="描述" v-bind="validateInfos.desc">
          <a-textarea v-model:value="modelRef.desc" :rows="4" placeholder="请选择" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, toRaw } from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
export default defineComponent({
  name: "CreateTaskModal",
  setup() {
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const showModal = () => {
      visible.value = true;
    };
    const modelRef = reactive({
      name: "",
      region: "",
      platform: "",
      type: "",
      desc: ""
    });
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入名称"
        }
      ],
      region: [
        {
          required: true,
          message: "请选择品牌"
        }
      ],
      platform: [
        {
          required: true,
          message: "请选择平台"
        }
      ],
      type: [
        {
          required: true,
          message: "请选择类型"
        }
      ]
    });
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
    const handleOk = () => {
      validate()
        .then(() => {
          console.log(toRaw(modelRef));
          confirmLoading.value = true;
          setTimeout(() => {
            visible.value = false;
            confirmLoading.value = false;
          }, 2000);
        })
        .catch((err) => {
          console.log("error", err);
        });
    };
    return {
      visible,
      confirmLoading,
      showModal,
      handleOk,
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      validateInfos,
      resetFields,
      modelRef
    };
  }
});
</script>
